<template>
    <transition
    :css='false'
    @enter='enter'
    @leave='leave'
    >
        <div class="normal-player" v-show="this.isFullScreen" >
            <div class="player-warpper">
                <PlayerHeader></PlayerHeader>
                <PlayerMiddle :currentTime='currentTime'></PlayerMiddle>
                <PlayerBottom :totalTime='totalTime' :currentTime='currentTime'></PlayerBottom>
            </div>
            <div class="player-bg">
              <div class="player-mb"></div>
                <img :src="currentSong.picUrl" alt="">
            </div>
        </div>
    </transition>
</template>

<script>
import PlayerHeader from './PlayerHeader.vue'
import PlayerMiddle from './PlayerMiddle.vue'
import PlayerBottom from './PlayerBottom.vue'
import { mapGetters, mapActions } from 'vuex'
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'
export default {
  name: 'NormalPlayer',
  components: {
    PlayerHeader,
    PlayerMiddle,
    PlayerBottom
  },
  computed: {
    ...mapGetters(['isFullScreen', 'currentSong'])
  },
  methods: {
    ...mapActions([
      'getSongLyric'
    ]),
    enter (el, done) {
      Velocity(el, 'transition.shrinkIn', { duration: 500 }, function () {
        done()
      })
    },
    leave (el, done) {
      Velocity(el, 'transition.shrinkOut', { duration: 500 }, function () {
        done()
      })
    }
  },
  watch: {
    currentSong (newValue, oldValue) {
      if (newValue.id === undefined) { return }
      this.getSongLyric(newValue.id)
      this.$bus.$emit('MusicComment', newValue.id)
    }
  },
  props: {
    totalTime: {
      type: Number,
      default: 0,
      required: true
    },
    currentTime: {
      type: Number,
      default: 0,
      required: true
    }
  }
}
</script>

<style scoped lang='scss'>
@import "../../assets/css/variable";
@import "../../assets/css/mixin";
.normal-player{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    @include bg_sub_color();
    .player-warpper{
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 999;
    }
    .player-bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        .player-mb{
          width: 100%;
          height: 100%;
          position: absolute;
          background-color: #333;
          z-index: 2;
          opacity: 0.4;
        }
        img{
            height: 100%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            filter: blur(50px);
            z-index: 1;
        }
    }
}
</style>
